//详细页
// 商品详情页面的逻辑

// 获取元素
const imgBox = document.querySelector('.show > img')
const listBox = document.querySelector('.list > img')
const enlargeBox = document.querySelector('.enlarge > img')
const titleBox = document.querySelector('.title')
const priceBox = document.querySelector('.price')
const descBox = document.querySelector('.desc')
const button = document.querySelector('button')

// 首先要拿到商品的id
const goodsId = window.sessionStorage.getItem('goodsId')
// 发送请去后去数据
setItem()
async function setItem() {
    let res = await pAjax({
        url: 'http://localhost:8888/goods/item',
        data: { id: goodsId },
        datatype: 'json'
    })
    console.log(res);
    listBox.src = res.info.img_big_logo
    enlargeBox.src = res.info.img_big_logo
    imgBox.src = res.info.img_big_logo
    titleBox.innerText = res.info.title
    priceBox.innerText = `￥${res.info.price}`
    descBox.innerHTML = res.info.goods_introduce
}
// 详情页面添加到购物车

button.addEventListener('click' ,async function (){
    const id = window.localStorage.getItem('id')
    const token = window.localStorage.getItem('token')
    if (!id || !token) {
        if (window.confirm('您还没有登录,点击取消留在本页面,点击确定去登录')) {
            window.location.href = '../views/denglu.html'
        }
        return
    }
    let res = await pAjax({
        url: 'http://localhost:8888/cart/add',
        method: 'post',
        data: { id, goodsId },
        datatype: 'json',
        headers: { 'authorization': token }
    })

       
    if (res.code !== 1) {
        if (window.confirm('您还没有登录,点击取消留在本页面,点击确定去登录')) {
            window.location.href = '../views/denglu.html'
        }
        return
    }
    
    alert('恭喜您添加购物车成功')
    console.log(res);
})

// 这里实现放大镜效果

// 首先我们创建一个类
class Enlarge{
    constructor(options){
 //   获取当前范围元素
  this.ele = document.querySelector(options)
 //  获取当前范围下的其他元素
   this.show = this.ele.querySelector('.show')//正常显示区域
   this.mask = this.ele.querySelector('.mask')//遮罩层盒子
   this.list = this.ele.querySelector('.list')//图片切换盒子
   this.enlarge = this.ele.querySelector('.enlarge')//右边显示放大效果的盒子
 //   获取   右边显示放大效果盒子下第一个元素节点
   this.picture = this.enlarge.firstElementChild
 //   获取尺寸
 this.show_w = this.show.clientWidth//show盒子的占地宽度
 this.show_h = this.show.clientHeight//show盒子的占地宽度
 // 获取遮罩层盒子的占地宽高  因为 display none 所以用操作非行内样式获取
 this.mask_w = parseInt(window.getComputedStyle(this.mask).width)
 this.mask_h = parseInt(window.getComputedStyle(this.mask).height)
 // 获取右边显示放大效果盒子下第一个元素节点  因为 display none 所以用操作非行内样式获取
 this.picture_w = parseInt(window.getComputedStyle(this.picture).width)
 this.picture_h = parseInt(window.getComputedStyle(this.picture).height)
 
 
 //  调用方法
  this.setScale()//计算比例
  this.overOut()//鼠标移入移出
  this.move()//鼠标联动
  
 
    }
 
 // 方法
 setScale(){
 //计算比例
 
         /* 
             mask 尺寸         x(要求的)
           -------------- =  ------------
             show 尺寸         picture 尺寸
         */
 this.enlarge_w = this.mask_w * this.picture_w / this.show_w
 this.enlarge_h = this.mask_h * this.picture_h / this.show_h
 // 进行赋值
 this.enlarge.style.width = this.enlarge_w + 'px'
 this.enlarge.style.height = this.enlarge_h +'px'
 
 }
 overOut(){
 // 鼠标移进  移出
 // 鼠标移进
 this.show.addEventListener('mouseover',() => {
  this.mask.style.display = 'block'
  this.enlarge.style.display = 'block'
 })
 // 鼠标移出
 this.show.addEventListener('mouseout',() =>{
     this.mask.style.display = 'none'
     this.enlarge.style.display = 'none'
 })
 
 }
 move(){
 // 鼠标联动
 // 给show盒子添加移动事件
 this.show.addEventListener('mousemove',e => {
     // 获取坐标值
     e = e || window.event//兼容性
     // 让鼠标在mask盒子中间
     let x = e.offsetX - this.mask.clientWidth / 2
     let y = e.offsetY - this.mask.clientHeight / 2
 //    边界值判断
   if(x <= 0)x= 0//左边
   if(y <= 0)y = 0//上边
   if(x >= this.show_w - this.mask_w) x = this.show_w - this.mask_w//右边
   if(y >= this.show_h - this.mask_h) y = this.show_h - this.mask_h//下边
 //   赋值给 mask 盒子
    this.mask.style.left = x + 'px'//左右
    this.mask.style.top = y + 'px'//上下
 /* 
                     mask 移动距离           mask 尺寸
                 --------------------- = ---------------
                     大图移动距离 x            enlarge 尺寸
             */
 
   this.enlarge_x = x * this.enlarge_w / this.mask_w
   this.enlarge_y = y * this.enlarge_h / this.mask_h
   //进行赋值
   this.picture.style.left = -this.enlarge_x + 'px'
   this.picture.style.top = - this.enlarge_y + 'px'
 
 })
 
 
 }
 
 
 
  }
